<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>美多商城-用户中心</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script type="text/javascript" src="js/host.js"></script>
    <script type="text/javascript" src="js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
</head>
<body>
	<div id="app">
		<div class="header_con">
			<div class="header">
				<div class="welcome fl">欢迎来到美多商城!</div>
				<div class="fr">
					<div v-if="username" class="login_btn fl">
						欢迎您：<em>{{ username }}</em>
						<span>|</span>
						<a @click="logoutfunc">退出</a>
					</div>
					<div v-else class="login_btn fl">
						<a href="login.html">登录</a>
						<span>|</span>
						<a href="register.html">注册</a>
					</div>
					<div class="user_link fl">
						<span>|</span>
						<a href="user_center_info.html">用户中心</a>
						<span>|</span>
						<a href="cart.html">我的购物车</a>
						<span>|</span>
						<a href="user_center_order.html">我的订单</a>
					</div>
				</div>
			</div>		
		</div>

		<div class="search_bar clearfix">
			<a href="index.html" class="logo fl"><img src="images/logo.png"></a>
			<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>
			<div class="search_con fr mt40">
				<input type="text" class="input_text fl" name="" placeholder="搜索商品">
				<input type="button" class="input_btn fr" name="" value="搜索">
			</div>		
		</div>

		<div class="main_con clearfix">
			<div class="left_menu_con clearfix">
				<h3>用户中心</h3>
				<ul>
					<li><a href="user_center_info.html">· 个人信息</a></li>
					<li><a href="user_center_order.html" class="active">· 全部订单</a></li>
					<li><a href="user_center_site.html">· 收货地址</a></li>
					<li><a href="user_center_pass.html">· 修改密码</a></li>
				</ul>
			</div>
			<div class="right_content clearfix">
					<h3 class="common_title2">全部订单</h3>
					<div v-for="order in orders">
						<ul class="order_list_th w978 clearfix">
							<li class="col01">{{order.create_time}}</li>
							<li class="col02">订单号：{{order.order_id}}</li>
						</ul>

						<table class="order_list_table w980">
							<tbody>
								<tr>
									<td width="55%">
										<ul class="order_goods_list clearfix" v-for="sku in order.skus">					
											<li class="col01"><img :src="sku.default_image_url"></li>
											<li class="col02">{{sku.name}} <br> <em>单价：{{sku.price}}</em></li>	
											<li class="col03">{{sku.count}}</li>
											<li class="col04">{{sku.price}}元</li>	
										</ul>
									</td>
									<td width="15%">{{order.order_total_count}}元</td>
									<td width="15%">{{order.pay_method_str}}</td>
									<td width="15%">
										<a href="#" @click="next_operate(order.order_id)" class="oper_btn" v-if="order.pay_status_str === '去支付'">{{order.pay_status_str}}</a>
										<a href="#" class="oper_btn" v-else>{{order.pay_status_str}}</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div class="pagenation">
						<a v-show="previous" @click="on_page(previous)">上一页</a>
						<a v-for="num in count" @click="on_page(num)" :class="num==page?'active':''">{{num}}</a>
						<a v-show="next" @click="on_page(next)">下一页></a>
					</div>

					<!-- <div class="pagenation">
						<a href="#"><上一页</a>
						<a href="#" class="active">1</a>
						<a href="#">2</a>
						<a href="#">3</a>
						<a href="#">4</a>
						<a href="#">5</a>
						<a href="#">下一页></a>
					</div> -->
			</div>
		</div>
	</div>

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	<script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/user_center_order.js"></script>
</body>
</html>